<template>
  <div class="detail-base-info">
    <div class="title" v-if="goodsInfo">{{goodsInfo.title}}</div>

    <div class="price" v-if="goodsInfo">
      <span class="now">{{goodsInfo.price}}</span>
      <span class="old">{{goodsInfo.oldPrice}}</span>
      <span v-if="goodsInfo.discount" class="discount"
            :style="{backgroundColor:goodsInfo.discountBgColor}">{{goodsInfo.discount}}</span>
    </div>

    <div class="columns" v-if="goodsInfo">
      <span>{{goodsInfo.columns[0]}}</span>
      <span>{{goodsInfo.columns[1]}}</span>
      <span>{{goodsInfo.services[goodsInfo.services.length-1].name}}</span>
    </div>

    <div class="service" v-if="goodsInfo">
      <span v-for="item in goodsInfo.services">
        <img :src="item.icon" alt="">
        {{item.name}}
      </span>
    </div>


  </div>
</template>

<script>

  export default {
    name: "DetailBaseInfo",
    props: {
      goodsInfo: {
        type: Object,
        default() {
          return null
        }
      }
    }
  }
</script>

<style scoped>

  .title {
    margin-top: 5px;
    padding: 0 5px;
    font-weight: 700;

    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*!* 弹性伸缩盒子模型显示 *!*/
    /*display: -webkit-box;*/
    /*!* 限制在一个块元素显示的文本的行数 *!*/
    /*-webkit-line-clamp: 2;*/
    /*!* 设置或检索伸缩盒对象的子元素的排列方式 *!*/
    /*-webkit-box-orient: vertical;*/
  }

  .price {
    margin-top: 5px;
  }

  .price .now {
    margin: 0 5px;
    font-weight: 700;
    font-size: 20px;
    color: var(--color-tint);
  }

  .price .old {
    font-size: 12px;
    text-decoration: line-through;
  }

  .price .discount {
    position: relative;
    left: 5px;
    top: -5px;
    padding: 2px 5px;
    font-weight: 700;
    font-size: 8px;
    background-color: var(--color-high-text);
    color: #fff;
    border-radius: 6px;
  }

  .columns {
    padding: 20px 0 10px;
    display: flex;
    font-size: 12px;
    color: #ccc;
    text-align: center;
    border-bottom: 2px solid rgba(100, 100, 100, .1);
  }

  .columns span {
    flex: 1;
  }

  .service {
    margin: 5px 0;
    padding: 5px 5px;
    display: flex;
    flex-wrap: wrap;
    font-size: 8px;
    /*border-bottom: 2px solid rgba(100, 100, 100, .1);*/
  }

  .service span {
    margin-top: 5px;
    margin-left: 2px;
    padding-right: 7px;
    height: 15px;
    line-height: 15px;

  }

  .service span img {
    vertical-align: sub;
    margin-left: 15px;
    width: 13px;
    height: 13px;
  }

</style>
